<template>
  <!-- 详情弹窗 -->
  <div v-if="visible" :style="{ opacity }"
    class="absolute top-0 right-0 h-full w-460px z-1000 bg-#003137 px-10px box-border">
    <el-button class="my-10px w-80px" type="primary" @click="close"> 返回 </el-button>
    <div v-if="tableList.length > 0">
      <el-table :data="tableList" style="width: auto" max-height="800" @row-click="handelRow">
        <el-table-column prop="reason" label="原因" width="150" />
        <el-table-column prop="bmmc" label="部门名称" />
        <el-table-column prop="sgbh" label="事故编号" width="200" />
        <el-table-column prop="sgfssj" label="事故发生时间" width="200" />
        <el-table-column prop="sgdd" label="事故地点" />
      </el-table>
      <div class="text-#fff mt-10px">总条数：{{ totalItems }}</div>
    </div>
    <div v-else class="text-center color-white">无内容</div>
  </div>
  <AccidentDetail ref="accidentDetail" @close="opacity = 1" />
</template>

<script setup lang="ts">
import { PostAccidentHeatMapDetailByReason, AccidentDetails } from "@/service/api/map";
import { eventTarget } from "@/utils/cesium/PrimitiveLoader";
import { getAssets } from "@/utils";

const opacity = ref(1);
const visible = ref(false);
const accidentDetail = ref();
const tableList = ref<any>([]);
// const currentPage = ref(1);
const totalItems = computed(() => tableList.value.length);
// const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));
// const pageSize = ref(5);

// const paginatedTableData = computed(() => {
//   const start = (currentPage.value - 1) * pageSize.value;
//   const end = start + pageSize.value;
//   return tableList.value.slice(start, end);
// });

// const handlePageChange = (newPage: number) => {
//   currentPage.value = newPage;
// };

const emit = defineEmits(["close"]);
const fetch = async (data) => {
  try {
    visible.value = true;
    tableList.value = [];
    const res = await PostAccidentHeatMapDetailByReason(data);
    if (res.length > 0) {
      tableList.value = res.reduce((accumulator, currentItem) => {
        const reason = currentItem.reason;
        const accidents = currentItem.accidentInfos;

        // 遍历每个事故信息，添加 reason 字段
        accidents.forEach(accident => {
          accident.reason = reason;
        });

        // 将处理后的事故信息添加到累加器数组中
        return accumulator.concat(accidents);
      }, []); // 初始累加器为空数组
    }
  } catch (error) {
    console.log(error);
  }
};

const handelRow = async (row) => {
  const { primitiveLoader, map3d } = window.cesiumInit;
  const res = await AccidentDetails(row.sgbh);
  const img = res?.imageList && res.imageList.length > 0 ? res.imageList[0].wholeUrl : getAssets('jtsg.png');
  if (res.dzzb84) {
    map3d.flyToPoint(res.dzzb84, { radius: 200 });
    primitiveLoader.loadAccident(res.dzzb84, img, row);
  }
}

eventTarget.on("loadAccident", function (event: any) {
  opacity.value = 0;
  accidentDetail.value.sgbh = event.sgbh;
  accidentDetail.value.fetchAccidentDetails(event.sgbh);
});

const close = () => {
  const { primitiveLoader } = window.cesiumInit;
  primitiveLoader.removeAccidentPlan();
  visible.value = false;
  emit('close');
}

defineExpose({
  fetch,
});
</script>

<style>
.el-table {
  --el-table-row-hover-bg-color: rgba(0, 0, 153, 0.2);
  /* color:black */
}

.el-pager li {
  background: transparent;
  color: white;
}

.el-table tr {
  background: transparent;
}

.el-table--fit {
  background: transparent;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  background: transparent;
  color: white;
  text-align: center;
  padding: 20px 0;
}

.el-pagination button {
  background: none;
  color: white;
}

.el-pagination button.is-disabled,
.el-pagination button:disabled {
  background: none;
  color: black
}

:global(.el-dialog) {
  background-color: #00313799 !important;
  border: 1px solid #fff;
}

:deep(.el-pagination button:disabled),
:deep(.el-pagination .btn-prev),
:deep(.el-pagination > .is-last) {
  background: transparent !important;
}

:deep(.el-pager li) {
  background: transparent !important;
  color: white !important;
}

:deep(.el-pager li.is-active) {
  color: #429ea5 !important;
}

.el-table__inner-wrapper {
  text-align: center;
}

:deep(.cell) {
  text-align: center !important;
}

.spans {
  display: flex;
  align-items: center;
  gap: 20px;
  color: white;
}
</style>
